<template>
  <div class="wrapper">
    <div class="img"><img src = "../assets/登录.png"></div>
    <div class="wrap">
        <input type="number" placeholder="请输入手机号" v-model="phone" @blur="animate()" maxlength="11">
        <input type="password" placeholder="请输入密码" v-model="pwd">
        <div class="login" @click="href()">登录</div>
    </div>
    <div class="wrap2">
        <span @click="href1()">立即注册</span>
        <span class="register">|</span>
        <span>忘记密码</span>
    </div>
  </div>
</template>
<script>
import {mapState,mapMutations} from 'vuex'
export default{
    data(){
      return {
          
          phone:'',
          pwd:''
      }
    },
    computed:{
      ...mapState(['user_info']), 
    },
    created(){
    //   console.log(this.$store.state.isLogin);

        this.phone=this.user_info.phones;
        this.pwd=this.user_info.password;
    },
    methods:{
        ...mapMutations(['info']),
        href(){
            
            const re = /^[1][3,4,5,6,7,8,9]\d{9}$/;
            if(this.phone===''||this.pwd===''){
                alert("请填写完整!")
            }
            else if(this.phone==''||this.phone.length<=10||!re.test(this.phone)){
                alert("手机号不合法")
            }else{
                this.$router.push({ path:'/home'  });
            }
            //this.$store.commit('isLogin')
        },
        href1(){
            this.$router.push({ path:'/register'  });
        },
        animate(){
            const re = /^[1][3,4,5,6,7,8,9]\d{9}$/;
            if(this.phone==''||this.phone.length<=10||!re.test(this.phone)){
                alert("手机号不合法")
            }
        },
        
    }
}
</script>

<style lang="scss" scoped>
    .img{
        width: 15vw;
        height: 15vw;
        margin: 0 auto;
        margin-top: 34vw;
        margin-bottom: 10vw;
        img{
            width:15vw;
            height:15vw;
        }
    }
    .wrap{
        display:flex;
        flex-direction:column;
        align-items:center;
        input,.login{
            outline:none;
            border: 0.1vw solid #ccc;
            width: 83vw;
            padding-left: 3vw;
            height: 12vw;
            font-size: 4.6vw;
            line-height: 10vw;
            border-radius: 2vw;
            margin-bottom: 5vw;
            background-color: #f0f0f0;
        }
        .login{
            width: 85vw;
            line-height: 14vw;
            height: 14vw;
            text-align: center;
            background-color: #1296db;
            margin-top: 2vw;
            color: white;
            font-size: 5.5vw;
        }
    }
    .wrap2{
        display:flex;
        justify-content:center;
        color:#ccc;
        .register{
            margin:0 2vw;
        }
    }
</style>